<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/register.css" />
		<script src="../js/mui.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/req.js"></script>
		<script type="text/javascript">
			mui.ready(function() {
				mui.init()

				mui('#box').on('tap','#back',function(){
					console.log("2222")
					mui.openWindow('login.html','login',{})
				})

				mui('.mui-input-group').on('tap', '#register', function() {
					console.log("1111")

					var phone = $("#phone").val();
					console.log(phone)
					var pwd = $("#pwd").val();
					console.log(pwd)
					var pwd2 = $("#pwd2").val();
					console.log(pwd2)
					
					if (phone == "") {
						mui.toast('手机号不能为空')
						return;
					}
					if (pwd == "") {
						mui.toast('密码不能为空')
						return;
					}
					if (pwd2 == "") {
						mui.toast('确认密码不能为空')
						return;
					}
					
					if (pwd == pwd2) {
						// 两次输入密码一致
						mui.ajax(apiurl + 'api/register', {
							data: {
								"phone": phone,
								"pwd": pwd
							},
							dataType: 'json', //服务器返回json格式数据
							type: 'post', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							headers: {
								'Content-Type': 'application/json'
							},
							success: function(data) {
								console.log(data)
								if (data.code == 500) {
									mui.toast('该账户已存在')
						
								} else {
									console.log("chenggong")
									mui.toast('注册成功,请返回登录')
									localStorage.setItem("token", data.token)
									// mui.openWindow('login.html', 'login', {})
								}
							},
						});
					} else {
						mui.toast('两次输入密码不一致')
						
					}


					

				})

			})
		</script>
		<style>
			input::placeholder {
				color: white;
			}

			#a {
				width: 50px;
				height: 50px;
				color: white;
			}
			.mui-input-group {
				background-color: #ffffff00;
				margin-top: 20%;
			}

			#bgimg {
				width: 100%;
				height: 100%;
				display: block;
				position: absolute;
				top: 0;
				z-index: -3;
			}

			#logoimg {
				width: 160px;
				height: 160px;
				display: block;
				margin: 10% auto;
				;
			}

			.mui-btn {
				border-radius: 20px;
			}
			
			#back{
				width:50px;
				margin-left:5%;
				background-color: #5DB1FA;
				/* color: #FFFFFF; */
			}
			
			#register{
				/* width: 160px; */
				height: 45px;
			/* 	text-align: center;
				vertical-align: center; */
				line-height: 10px;
			}
			
		</style>
	</head>

	<body>
		<img id='bgimg' src="../img/login2.png" alt="" />

		<div id="box">
			<!-- <button id="back" type="button" class="mui-btn" style="font-size: 16px">返回</button> -->
			<img id="back" src="../img/返回按钮-1.png" alt="" />
		</div>
		<img id="logoimg" src="../img/logo-lan-queding.png" alt="" />

		<p style="text-align: center;color: white;font-family: 隶书;font-size: 50px;">用户注册</p>

		<form class="mui-input-group">

			<div class="mui-input-row">
				<input type="text" id="phone" class="mui-input-clear" placeholder="请输入手机号">
			</div>
			<div class="mui-input-row">
				<input type="password" id="pwd" class="mui-input-clear" placeholder="请输入密码">
			</div>
			<div class="mui-input-row">
				<input type="password" id="pwd2" class="mui-input-clear" placeholder="请确认密码">
			</div>
			<div id="box2">
				<button id="register" type="button" class="mui-btn mui-btn-block mui-btn-green">注册</button>
			</div>
		</form>
	</body>

</html>